<template>
  <scroll-view :class="[styles['group']]">
    <text :class="[styles['text'], styles['text_1']]">智慧空间</text>
    <view :class="['flex-col', styles['group_1']]">
      <swiper :class="[styles['image']]">
        <swiper-item v-for="item in swipers" :key="item">
          <image :src="item" :class="[styles['image']]" />
        </swiper-item>
      </swiper>
      <view :class="['flex-col', styles['section_2']]">
        <view :class="['flex-col']">
          <view :class="['flex-col', 'items-start', styles['group_5']]">
            <image src="../../static/images/index/4dd48fb51d1483a47c8fb01149bd9e20.png" :class="[styles['image_4']]" />
            <text :class="[styles['text_4']]">企业/店铺广告投放</text>
          </view>
          <view :class="['flex-col', styles['group_4']]">
            <text :class="[styles['text'], styles['text_51']]">媒体类型</text>
            <view :class="['flex-col', 'items-start', styles['list_2']]">
              <view :class="['flex-col', styles['list-item_3']]" :key="i" v-for="(item, i) in list_621TSdf7">
                <view :class="['flex-col', 'items-start', styles['text-wrapper']]">
                  <text :class="[styles['text'], styles['text_5']]">地铁灯箱广告</text>
                </view>
                <image src="../../static/images/index/5ed4ef70bf4ec7f2afc5e42e2c044f2e.png"
                  :class="[styles['image_3']]" />
              </view>
            </view>
          </view>
        </view>
        <view :class="['flex-col', styles['group_10']]">
          <view :class="['flex-col', 'items-start', styles['group_5']]">
            <image src="../../static/images/index/4dd48fb51d1483a47c8fb01149bd9e20.png" :class="[styles['image_4']]" />
            <text :class="[styles['text_4']]">个人广告投放</text>
          </view>
          <view :class="['flex-col', styles['group_11']]">
            <text :class="[styles['text'], styles['text_11']]">一键投放同类广告</text>
            <view :class="[styles['grid']]">
              <view :class="['flex-col', styles['grid-item']]">
                <view :class="['flex-col', 'items-start', styles['group_12']]">
                  <image src="../../static/images/index/439c9d1970dc38da6dff589defe664e7.png"
                    :class="[styles['image_9']]" />
                  <image src="../../static/images/index/f8824b037c1995696fe41b951092cc67.png"
                    :class="[styles['image_11']]" />
                </view>
                <text :class="[styles['text'], styles['text_12']]">爱的表白</text>
              </view>
              <view :class="['flex-col', styles['grid-item_1']]">
                <view :class="['flex-col', 'items-center', styles['group_13']]">
                  <image src="../../static/images/index/40fdf084a1014b192f9f58bea9194f80.png"
                    :class="[styles['image_12']]" />
                  <image src="../../static/images/index/61ad7eaace444943068dc87853509289.png"
                    :class="[styles['image_13']]" />
                </view>
                <text :class="[styles['text'], styles['text_13']]">周年纪念</text>
              </view>
              <view :class="['flex-col', 'items-center', styles['grid-item_2']]">
                <image src="../../static/images/index/816dc309d8f43ff771db6408a59fa00c.png"
                  :class="[styles['image_9']]" />
                <text :class="[styles['text'], styles['text_14']]">偶像应援</text>
              </view>
              <view :class="['flex-col', styles['grid-item_3']]">
                <view :class="['flex-col', 'items-center', styles['group_14']]">
                  <image src="../../static/images/index/1e64cb7fa5461719607caca5a3ceaa73.png"
                    :class="[styles['image_15']]" />
                  <image src="../../static/images/index/4c1a9468b807634313dbe47499d029c8.png"
                    :class="[styles['image_16']]" />
                </view>
                <text :class="[styles['text'], styles['text_15']]">毕业纪念</text>
              </view>
              <view :class="['flex-col', styles['grid-item_4']]">
                <view :class="['flex-col', 'items-center', styles['group_15']]">
                  <image src="../../static/images/index/8993a3a17a7c819a1ba4b50c4ca6230a.png"
                    :class="[styles['image_17']]" />
                  <image src="../../static/images/index/f8824b037c1995696fe41b951092cc67.png"
                    :class="[styles['image_18']]" />
                </view>
                <text :class="[styles['text'], styles['text_16']]">生日祝福</text>
              </view>
              <view :class="['flex-col', 'items-center', styles['grid-item_5']]">
                <image src="../../static/images/index/96555f1af599176812d52b77de801c60.png"
                  :class="[styles['image_19']]" />
                <text :class="[styles['text'], styles['text_17']]">其他推广</text>
              </view>
            </view>
          </view>
        </view>
        <view :class="['flex-col', styles['group_16']]">
          <view :class="['justify-between', styles['group_17']]">
            <view :class="['flex-col', 'items-start', styles['group_18']]">
              <image src="../../static/images/index/4dd48fb51d1483a47c8fb01149bd9e20.png"
                :class="[styles['image_4'], styles['image_20']]" />
              <text :class="[styles['text_18']]">优惠套餐</text>
            </view>
            <text :class="[styles['text_55'], styles['text_20']]">more+</text>
          </view>
          <view :class="['flex-row', styles['list'], styles['group_31']]">
            <view :class="['flex-col', styles['list-item_1'], styles['group_38']]" :key="i"
              v-for="(item, i) in list_sQIgx7B6">
              <view :class="['flex-col', styles['section_9']]">
                <text :class="[styles['text_60']]">地铁灯箱广告（5块15天套餐）</text>
                <view :class="[styles['group_42']]">
                  <text :class="[styles['text_19']]">人的一生总得经历些对于你来说翻天覆地的事，而后才会以</text>
                  <text :class="[styles['text_21']]">那种云淡风轻心态去面对一切</text>
                </view>
                <view :class="['justify-between', styles['group_19']]">
                  <view :class="['flex-row']">
                    <image src="../../static/images/index/182e8e60e4bc69431018f72cc6ddc392.png"
                      :class="[styles['image_39']]" />
                    <text :class="[styles['text_23']]">7200</text>
                  </view>
                  <view :class="['flex-row', styles['group_21']]">
                    <image src="../../static/images/index/637f642d3355ce1eb3de6cf467ee29ff.png"
                      :class="[styles['image_38']]" />
                    <text :class="[styles['text_25']]">200</text>
                  </view>
                </view>
              </view>
              <image src="../../static/images/index/dd66903bf8112d7a64b0f2fd48c9b207.png"
                :class="[styles['image_22']]" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import styles from './ditieguanggao.module.scss';

// 轮播图
const swipers = ref([
  '../../static/images/index/5ed4ef70bf4ec7f2afc5e42e2c044f2e.png',
  '../../static/images/index/5ed4ef70bf4ec7f2afc5e42e2c044f2e.png'
])

const list_sQIgx7B6 = ref([null, null])
const list_621TSdf7 = ref([null, null])
</script>